<template>
  <div class="update-shop-channel-info" v-loading="uploading">
    <div v-if="uploading" class="progress-bar">
      <section :width="(percent * 100) + '%'">{{(percent * 100) + '%'}}</section>
    </div>
    <div style="border-top: 1px solid #eee;min-width:600px" v-loading="uploading">
      <el-row>
        <el-col :span="6">
          <vueUploader
            label="门头照"
            :defaultSrc="defaultInfo.merchantHeadPic"
            name="merchantHeadPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="收银台照"
            :defaultSrc="defaultInfo.merchantChechPic"
            name="merchantChechPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="经营场所照"
            :defaultSrc="defaultInfo.otherPhotoThreePic"
            name="otherPhotoThreePic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="法人身份证正面照"
            :defaultSrc="defaultInfo.identityFacePic"
            name="identityFacePic"
            @onChange="handleChange"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <vueUploader
            label="法人身份证反面照"
            :defaultSrc="defaultInfo.identityBackPic"
            name="identityBackPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="开户许可证照"
            :defaultSrc="defaultInfo.businessCardPic"
            name="businessCardPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="营业执照照"
            :defaultSrc="defaultInfo.businessPic"
            name="businessPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="结算人身份证正面照"
            :defaultSrc="defaultInfo.identityFaceCopyPic"
            name="identityFaceCopyPic"
            @onChange="handleChange"
          />
        </el-col>
      </el-row>
      <el-row></el-row>
      <el-row>
        <el-col :span="6">
          <vueUploader
            label="结算人身份证反面照"
            :defaultSrc="defaultInfo.identityBackCpoyPic"
            name="identityBackCpoyPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="手持身份证照片"
            :defaultSrc="defaultInfo.identityBodyPic"
            name="identityBodyPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="非法人对私授权函"
            :defaultSrc="defaultInfo.otherPhotoFourPic"
            name="otherPhotoFourPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="租房合同"
            :defaultSrc="defaultInfo.otherPhotoTwoPic"
            name="otherPhotoTwoPic"
            @onChange="handleChange"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <vueUploader
            label="其他资料"
            :defaultSrc="defaultInfo.otherPhotoPic"
            name="otherPhotoPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="内部前台照片"
            :defaultSrc="defaultInfo.firstPhotoPic"
            name="firstPhotoPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="银行卡正面照片"
            :defaultSrc="defaultInfo.bankFrontPhotoPic"
            name="bankFrontPhotoPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="银行卡反面照片"
            :defaultSrc="defaultInfo.bankReversePhotoPic"
            name="bankReversePhotoPic"
            @onChange="handleChange"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <vueUploader
            label="商户场景照片"
            :defaultSrc="defaultInfo.mchScenePhotoPic"
            name="mchScenePhotoPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="商户总分店关系证明"
            :defaultSrc="defaultInfo.relationshipPhotoPic"
            name="relationshipPhotoPic"
            @onChange="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <vueUploader
            label="商户增值协议"
            :defaultSrc="defaultInfo.merchantPhotoPic"
            name="merchantPhotoPic"
            @onChange="handleChange"
          />
        </el-col>
      </el-row>

      <div style="padding:20px 0;border: 1px solid #eee;">【注意】除 非法人对私授权函、租房合同、其他资料三张为非必传，其他均为必传！</div>
      <div class="submit-box">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCannel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import vueUploader from "@/components/common/temp/vueUploader.vue";
// const noRequired = ["otherPhotoFourPic", "otherPhotoTwoPic", "otherPhotoPic"];
export default {
  props: {
    userId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    defaultInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      percent: 0,
      uploading: false,
      formInfo: {
        userId: null,
        merchantHeadPic: null,
        merchantChechPic: null,
        otherPhotoThreePic: null,
        identityFacePic: null,
        identityBackPic: null,
        businessCardPic: null,
        businessPic: null,
        identityFaceCopyPic: null,
        identityBackCpoyPic: null,
        identityBodyPic: null,
        otherPhotoFourPic: null,
        otherPhotoTwoPic: null,
        otherPhotoPic: null
      }
    };
  },
  components: { vueUploader },
  created() {},
  mounted() {
    this.formInfo.userId = this.userId;
  },
  methods: {
    handleChange({ name, file }) {
      this.$set(this.formInfo, name, file);
      // this.formInfo[name] = file;
      //   console.log(name, file, this.formInfo);
    },
    handleCannel() {
      this.$emit("close-box");
    },
    handleSubmit() {
      let param = new FormData();
      for (let key in this.formInfo) {
        // if (noRequired.indexOf(key) < 0 && !this.formInfo[key]) {
        //   this.$message.warning("请填写完整");
        //   return;
        // }
        if (this.formInfo[key]) {
          param.append(key, this.formInfo[key]);
        }
      }
      let _this = this;
      let url =
        this.$Http.defaults.baseURL + `user/FastSilverPicPath/uploadPics`;
      this.uploading = true;
      try {
        const xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", this.uploadProgress, false);
        xhr.open("POST", url, true);
        xhr.send(param);
        xhr.onload = () => {
          this.uploading = false;
          if (xhr.status === 200 || xhr.status === 304) {
            const res = JSON.parse(xhr.responseText);
            if (res.resp_code === "000000") {
              this.$message.success(res.resp_message);
              this.handleCannel();
            } else {
              this.$message.info(res.resp_message);
            }
          } else {
            this.$message.error("服务器繁忙！上传失败！");
          }
        };
      } catch (err) {
        this.uploading = false;
        this.$message.error("服务器繁忙！上传失败！");
      }

      // let config = { headers: { 'Content-Type': 'multipart/form-data' }};
      // this.$Http.post(url,param,config).then(res=>{
      // if(res.data.resp_code === '000000'){
      //    this.$message.success(res.data.resp_message);
      //    this.handleCannel();
      // }else{
      //     this.$message.info(res.data.resp_message);
      // }
      // }).catch(err=>{
      //     this.$message.error("服务器繁忙！上传失败！");
      // })
    },
    uploadProgress(evt) {
      const component = this;
      if (evt.lengthComputable) {
        const percentComplete = Math.round((evt.loaded * 100) / evt.total);
        component.percent = percentComplete / 100;
      } else {
        console.warn("upload progress unable to compute");
      }
    }
  }
};
</script>
<style scoped>
.update-shop-channel-info {
  text-align: center;
  box-sizing: border-box;
  padding-left: 20px;
}
.submit-box {
  text-align: center;
  border: 1px solid #eee;
  padding: 20px 0;
}

.progress-bar {
  flex-grow: 1;
}
.progress-bar section {
  margin-top: 5px;
  background: #00b4aa;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  transition: all 0.5s ease;
}
</style>